<template>
    <div class="runState">
        <div class="left">
            <div class="text">
                <p>{{name}}</p>
                <img src="../assets/img/mg427.png" alt="">
            </div>
            <div>
                <iframe id="template-iframe" ref="modelIframe" :src="iframeSrc" width="866" height="550" style="width:100%"></iframe>
            </div>
            <div class="text" style="margin-top:20px">
                <p>趋势分析</p>
                <img src="../assets/img/mg427.png" alt="">
            </div>
            <trend :type="modelIndex" v-if="showTrend"/>
        </div>
        <div class="right">
            <div class="title">
                <div class="tab">
                    <p :class="{'active': activeIndex === 0}" @click="choose(0)">内冷系统</p>
                    <p :class="{'active': activeIndex === 1}" @click="choose(1)">外冷系统</p>     
                    <p :class="{'active': activeIndex === 2}" @click="choose(2)">水处理系统</p>                
                </div>
            </div>

            <div class="infos">
                <div class="top_border"></div>
                <div class="list">
                    <img v-if="activeIndex === 0" src="../assets/img/1.png" alt="">
                    <img v-if="activeIndex === 1" src="../assets/img/2.png" alt="">
                    <img v-if="activeIndex === 2" src="../assets/img/3.png" alt="">
                    <div class="model" v-if="activeIndex === 0">
                        <p class="item1-1" @click="item1(1,true)"></p>
                        <p class="item1-2" @click="item1(2,true)"></p>
                        <p class="item1-3" @click="item1(3,true)"></p>
                        <p class="item1-4" @click="item1(4,true)"></p>
                        <p class="item1-5" @click="item1(5,true)"></p>
                        <p class="item1-6" @click="item1(6,true)"></p>
                        <p class="item1-8" @click="item1(8,true)"></p>
                        <p class="item1-9" @click="item1(9,true)"></p>
                        <p class="item1-10" @click="item1(10,true)"></p>
                        <p class="item1-11" @click="item1(11,true)"></p>
                        <p class="item1-12" @click="item1(12,true)"></p>
                        <p class="item1-13" @click="item1(13,true)"></p>
                        <p class="item1-14" @click="item1(14,true)"></p>
                        <p class="item1-15" @click="item1(15,true)"></p>
                    </div>
                    <div class="model" v-if="activeIndex === 1">
                        <p class="item1-16" @click="item1(16,true)"></p>
                        <p class="item1-17" @click="item1(17,true)"></p>
                        <p class="item1-18" @click="item1(18,true)"></p>
                        <p class="item1-19" @click="item1(19,true)"></p>
                        <p class="item1-20" @click="item1(20,true)"></p>
                        <p class="item1-21" @click="item1(21,true)"></p>
                        <p class="item1-22" @click="item1(22,true)"></p>
                        <p class="item1-23" @click="item1(23,true)"></p>
                        <p class="item1-24" @click="item1(24,true)"></p>
                        <p class="item1-25" @click="item1(25,true)"></p>
                        <p class="item1-26" @click="item1(26,true)"></p>
                        <p class="item1-26-1" @click="item1(26,true)"></p>
                        <p class="item1-27" @click="item1(27,true)"></p>
                        <p class="item1-28" @click="item1(28,true)"></p>
                        <p class="item1-29" @click="item1(29,true)"></p>
                    </div>
                    <div class="model" v-if="activeIndex === 2">
                        <p class="item1-30" @click="item1(30,true)"></p>
                        <p class="item1-31" @click="item1(31,true)"></p>
                        <p class="item1-32" @click="item1(32,true)"></p>
                        <p class="item1-33" @click="item1(33,true)"></p>
                        <p class="item1-34" @click="item1(34,true)"></p>
                        <p class="item1-35" @click="item1(35,true)"></p>
                        <p class="item1-36" @click="item1(36,true)"></p>
                        <p class="item1-37" @click="item1(37,true)"></p>
                        <p class="item1-38" @click="item1(38,true)"></p>
                    </div>
                </div>
                <div class="bottom_border"></div>
            </div>
            <div class="lists">
                <div class="tabs">
                    <p>设备状态</p>
                    <img src="../assets/img/mg427.png" alt="">
                </div>
                <div class="parameter">
                    <div class="top_border"></div>
                    <div class="list" v-if="activeIndex === 0">
                        <div class="item" @click="item1(12,errorState(0))">
                            <p>膨胀罐</p>
                            <span>
                                <i v-if="errorState(0)" class="el-icon-success"></i>
                                <i v-if="!errorState(0)" class="el-icon-error"></i>
                            </span>
                        </div>
                        <div class="item" @click="item1(10,errorState(1))">
                            <p>补水罐</p>
                            <span>
                                <i v-if="errorState(1)" class="el-icon-success"></i>
                                <i v-if="!errorState(1)" class="el-icon-error"></i>
                            </span>
                        </div>
                        <div class="item" @click="item1(5,errorState(2))">
                            <p>主过滤器</p>
                            <span>
                                <i v-if="errorState(2)" class="el-icon-success"></i>
                                <i v-if="!errorState(2)" class="el-icon-error"></i>
                            </span>
                        </div>
                        <div class="item" @click="item1(11,errorState(3))">
                            <p>离子交换器</p>
                            <span>
                                <i v-if="errorState(3)" class="el-icon-success"></i>
                                <i v-if="!errorState(3)" class="el-icon-error"></i>
                            </span>
                        </div>

                        <div class="item" @click="item1(1,errorState(4))">
                            <p>P01主循环泵</p>
                            <span>
                                <i v-if="errorState(4)" class="el-icon-success"></i>
                                <i v-if="!errorState(4)" class="el-icon-error"></i>
                            </span>
                        </div>
                        
                        <div class="item" @click="item1(2,errorState(5))">
                            <p>P02主循环泵</p>
                            <span>
                                <i v-if="errorState(5)" class="el-icon-success"></i>
                                <i v-if="!errorState(5)" class="el-icon-error"></i>
                            </span>
                        </div>
                        <div class="item" @click="item1(4,errorState(6))">
                            <p>H01电加热器</p>
                            <span>
                                <i v-if="errorState(6)" class="el-icon-success"></i>
                                <i v-if="!errorState(6)" class="el-icon-error"></i>
                            </span>
                        </div>
                        <div class="item" @click="item1(4,errorState(7))">
                            <p>H03电加热器</p>
                            <span>
                                <i v-if="errorState(7)" class="el-icon-success"></i>
                                <i v-if="!errorState(7)" class="el-icon-error"></i>
                            </span>
                        </div>
                        <div class="item" @click="item1(4,errorState(8))">
                            <p>H02电加热器</p>
                            <span>
                                <i v-if="errorState(8)" class="el-icon-success"></i>
                                <i v-if="!errorState(8)" class="el-icon-error"></i>
                            </span>
                        </div>
                        <div class="item" @click="item1(6,errorState(9))">
                            <p>VB01电动比例阀</p>
                            <span>
                                <i v-if="errorState(9)" class="el-icon-success"></i>
                                <i v-if="!errorState(9)" class="el-icon-error"></i>
                            </span>
                        </div>
                        
                        <div class="item" @click="item1(6,errorState(10))">
                            <p>VB02电动比例阀</p>
                            <span>
                                <i v-if="errorState(10)" class="el-icon-success"></i>
                                <i v-if="!errorState(10)" class="el-icon-error"></i>
                            </span>
                        </div>
                        <div class="item"></div>
                        
                    </div>
                    <div class="list" v-if="activeIndex === 1">
                        <div class="item" @click="item1(33,errorState(11))">
                            <p>加药泵</p>
                            <span>
                                <i v-if="errorState(11)" class="el-icon-success"></i>
                                <i v-if="!errorState(11)" class="el-icon-error"></i>
                            </span>
                        </div>
                        <div class="item" @click="item1(26,errorState(12))">
                            <p>砂滤器</p>
                            <span>
                                <i v-if="errorState(12)" class="el-icon-success"></i>
                                <i v-if="!errorState(12)" class="el-icon-error"></i>
                            </span>
                        </div>
                        <div class="item" @click="item1(17,errorState(13))">
                            <p>1#冷却器</p>
                            <span>
                                <i v-if="errorState(13)" class="el-icon-success"></i>
                                <i v-if="!errorState(13)" class="el-icon-error"></i>
                            </span>
                        </div>
                        <div class="item" @click="item1(18,errorState(14))">
                            <p>2#冷却器</p>
                            <span>
                                <i v-if="errorState(14)" class="el-icon-success"></i>
                                <i v-if="!errorState(14)" class="el-icon-error"></i>
                            </span>
                        </div>
                        <div class="item" @click="item1(19,errorState(15))">
                            <p>3#冷却器</p>
                            <span>
                                <i v-if="errorState(15)" class="el-icon-success"></i>
                                <i v-if="!errorState(15)" class="el-icon-error"></i>
                            </span>
                        </div>
                    </div>
                    <div class="list" v-if="activeIndex === 2">
                        <div class="item" @click="item1(31,errorState(16))">
                            <p>清洗水箱</p>
                            <span>
                                <i v-if="errorState(16)" class="el-icon-success"></i>
                                <i v-if="!errorState(16)" class="el-icon-error"></i>
                            </span>
                        </div>
                        <div class="item" @click="item1(33,errorState(17))">
                            <p>J01加药泵</p>
                            <span>
                                <i v-if="errorState(17)" class="el-icon-success"></i>
                                <i v-if="!errorState(17)" class="el-icon-error"></i>
                            </span>
                        </div>
                        <div class="item" @click="item1(24,errorState(18))">
                            <p>J02加药泵</p>
                            <span>
                                <i v-if="errorState(18)" class="el-icon-success"></i>
                                <i v-if="!errorState(18)" class="el-icon-error"></i>
                            </span>
                        </div>
                        <div class="item" @click="item1(35,errorState(19))">
                            <p>一段膜组件</p>
                            <span>
                                <i v-if="errorState(19)" class="el-icon-success"></i>
                                <i v-if="!errorState(19)" class="el-icon-error"></i>
                            </span>
                        </div>
                        <div class="item" @click="item1(36,errorState(20))">
                            <p>二段膜组件</p>
                            <span>
                                <i v-if="errorState(20)" class="el-icon-success"></i>
                                <i v-if="!errorState(20)" class="el-icon-error"></i>
                            </span>
                        </div>
                        <div class="item" @click="item1(37,errorState(21))">
                            <p>三段膜组件</p>
                            <span>
                                <i v-if="errorState(21)" class="el-icon-success"></i>
                                <i v-if="!errorState(21)" class="el-icon-error"></i>
                            </span>
                        </div>
                    </div>
                    <div class="bottom_border"></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import trend from '../components/trend.vue'
export default {
    components:{
        trend
    },
    data(){
        return {
            showTrend:false,
            trendInfos:{},
            modelIndex:0,
            activeIndex: 0,
            isShow:false,
            monitorList:[
                {
                    a:'1',
                    b:'2',
                    c:'2',
                    d:'2',
                    e:'2',
                    f:'2',
                },{
                    a:'1',
                    b:'2',
                    c:'2',
                    d:'2',
                    e:'2',
                    f:'2',
                },{
                    a:'1',
                    b:'2',
                    c:'2',
                    d:'2',
                    e:'2',
                    f:'2',
                },{
                    a:'1',
                    b:'2',
                    c:'2',
                    d:'2',
                    e:'2',
                    f:'2',
                },{
                    a:'1',
                    b:'2',
                    c:'2',
                    d:'2',
                    e:'2',
                    f:'2',
                },{
                    a:'1',
                    b:'2',
                    c:'2',
                    d:'2',
                    e:'2',
                    f:'2',
                }
            ],
            dataList:{
                1:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀内冷系统",
                    "Level3ObjName": "E1.P01主循环泵",
                    "Level4ObjName": "E1.P01主循环泵",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                2:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀内冷系统",
                    "Level3ObjName": "E1.P02主循环泵",
                    "Level4ObjName": "E1.P02主循环泵",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                3:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀内冷系统",
                    "Level3ObjName": "E1.C01脱气罐",
                    "Level4ObjName": "E1.C01脱气罐",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                4:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀内冷系统",
                    "Level3ObjName": "E1.H02电加热器",
                    "Level4ObjName": "E1.H02电加热器",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                5:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀内冷系统",
                    "Level3ObjName": "E1.Z01主过滤器",
                    "Level4ObjName": "E1.Z01主过滤器",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                6:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀内冷系统",
                    "Level3ObjName": "E1.VB01电动三通比例阀",
                    "Level4ObjName": "E1.VB01电动三通比例阀",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                8:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀内冷系统",
                    "Level3ObjName": "E1.C07移动补水车",
                    "Level4ObjName": "E1.C07移动补水车",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                9:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀内冷系统",
                    "Level3ObjName": "E1.P04补水泵",
                    "Level4ObjName": "E1.P04补水泵",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                10:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀内冷系统",
                    "Level3ObjName": "E1.C02补水罐",
                    "Level4ObjName": "E1.C02补水罐",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                11:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀内冷系统",
                    "Level3ObjName": "E1.C03离子交换器",
                    "Level4ObjName": "E1.C03离子交换器",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                12:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀内冷系统",
                    "Level3ObjName": "E1.C06膨胀罐",
                    "Level4ObjName": "E1.C06膨胀罐",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                13:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀内冷系统",
                    "Level3ObjName": "E1.N2氮气瓶",
                    "Level4ObjName": "E1.N2氮气瓶",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                14:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀内冷系统",
                    "Level3ObjName": "曝气回路",
                    "Level4ObjName": "E1.VC01电磁阀",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                15:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀内冷系统",
                    "Level3ObjName": "E1.Z05精密过滤器",
                    "Level4ObjName": "E1.Z05精密过滤器",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                16:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀内冷系统",
                    "Level3ObjName": "E1.内外冷进水管道",
                    "Level4ObjName": "E1.内外冷进水管道",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                17:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "1#冷却塔",
                    "Level4ObjName": "E2.FXV01闭式冷却塔",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                18:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "2#冷却塔",
                    "Level4ObjName": "E2.FXV02闭式冷却塔",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                19:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "3#冷却塔",
                    "Level4ObjName": "E2.FXV03闭式冷却塔",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                20:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "缓冲水池",
                    "Level4ObjName": "",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                21:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "1#喷淋泵组",
                    "Level4ObjName": "E2.P01喷淋泵",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                22:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "2#喷淋泵组",
                    "Level4ObjName": "E2.P03喷淋泵",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                23:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "3#喷淋泵组",
                    "Level4ObjName": "E2.P05喷淋泵",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                24:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "E2.J02加药装置",
                    "Level4ObjName": "E2.J02加药装置",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                25:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "排污集水池",
                    "Level4ObjName": "E2.P09排水泵",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                26:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "砂滤模块",
                    "Level4ObjName": "E2.Z01砂滤器",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                27:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "E3.Z01活性炭过滤器",
                    "Level4ObjName": "E3.Z01活性炭过滤器",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                28:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "E3.P01反洗泵",
                    "Level4ObjName": "E3.P01反洗泵",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                29:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "E4.P01外冷补水泵",
                    "Level4ObjName": "E4.P01外冷补水泵",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                30:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "E5.P01反渗透升压泵",
                    "Level4ObjName": "E5.P01反渗透升压泵",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                31:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "E5.P02RO清洗水泵",
                    "Level4ObjName": "E5.P02RO清洗水泵",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                32:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "E5.C01清洗水箱",
                    "Level4ObjName": "E5.C01清洗水箱",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                33:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "E5.J01加药装置",
                    "Level4ObjName": "E5.J01加药装置",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                34:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "E5.Z02反渗透保安过滤器",
                    "Level4ObjName": "E5.Z02反渗透保安过滤器",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                35:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "E5.一段膜组件",
                    "Level4ObjName": "E5.PV01膜段",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                36:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "E5.二段膜组件",
                    "Level4ObjName": "E5.PV03膜段",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                37:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "E5.三段膜组件",
                    "Level4ObjName": "E5.PV05膜段",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
                38:{
                    "Level1ObjName": "极I低端",
                    "Level2ObjName": "阀外冷系统",
                    "Level3ObjName": "E5.Z03反渗透保安过滤器",
                    "Level4ObjName": "E5.Z03反渗透保安过滤器",
                    // "Level4ObjName": "None",
                    "Health": "0"
                },
            },
            name:'极Ⅰ低端阀冷系统'
        }
    },
    computed:{
        config(){
            const config = window.localStorage.getItem('config')
            return config ? JSON.parse(config) : {}
        },
        iframeSrc(){
            return `${this.config.modelUrl}NC/s4/?access_token=${this.config.token}`
        },
        equipmentInfo(){
            return this.config.equipmentInfo[this.activeIndex]
        },
        lists(){
            let newList = {}
            const list = this.$store.state.realTimeData
            if(list.length > 0){
                newList = list.reverse()[0]
            }
            return newList
            
        },
    },
    mounted(){
        let config = window.localStorage.getItem('config')
        if(config){
            this.name = JSON.parse(config).systemName
        }
        setInterval(() => {
            
            config = window.localStorage.getItem('config')
            if(config){
                this.name = JSON.parse(config).systemName
            }
        }, 2000)
    },
    methods: {
        item1(type,state){
            this.modelIndex = type
            this.showTrend = false
            this.$nextTick(() => {
                this.showTrend = true
            });

            let params = this.dataList[type]
            if(!state){
                params.Health = '1'
            }

            this.$refs.modelIframe.contentWindow.postMessage({
                "clientId": "frame",
                "messageType": "Focus",
                "messageId": new Date().getTime(),
                "params": params
            },'*');
        },
        choose(index) {
            this.activeIndex = index
        },
        errorState(type){
            let result = true
            let newResult = true
            if(!this.lists.E1_P01_WORKING){
                return result
            }

            switch(type){
                case 0: 
                    newResult =    Number(this.lists.E1_VC03_fault)===2  ||Number(this.lists.L_Of_BufferTank_l)===2 ||Number(this.lists.L_Of_BufferTank_ll)===2 ||
                                Number(this.lists.L_Of_BufferTank_h)===2 ||Number(this.lists.P_Of_BufferTank_h)===2 ||Number(this.lists.P_Of_BufferTank_hh)===2 ||
                                Number(this.lists.P_Of_BufferTank_l)===2||Number(this.lists.P_Of_BufferTank_ll)===2|| 
                                Number(this.lists.L_Of_BufferTank_LLT)===2|| Number(this.lists.E1_VC03_FAULT)===2||
                                Number(this.lists.BUFFER_LEVLE_LL_Button)===2;
                    break;
                case 1:
                    newResult =    Number(this.lists.L_Of_SupplyTank_l)===2||Number(this.lists.E1_LIT01_break)===2||Number(this.lists.E1_LIT01_fault)===2
                    break;
                case 2:
                    newResult =    Number(this.lists.E1_DPIS01_dispressure_h)===2||Number(this.lists.E1_DPIS02_dispressure_h)===2
                    break;
                case 3:
                    newResult =    Number(this.lists.CDT_Of_DW_h)===2||Number(this.lists.CDT_Of_DW_hh)===2;
                    break;
                case 4:
                    newResult =    (Number(this.lists.E1_P01_WORKING)===2) && (Number(this.lists.E1_P01_MOTER_toohot)===2  || Number(this.lists.E1_P01_E_L)===2||Number(this.lists.E1_P01_E_H)===2|| Number(this.lists.E1_P01_LEAKAGE)===2);
                    break;
                case 5:
                    newResult =    (Number(this.lists.E1_P02_WORKING)===2) && (Number(this.lists.E1_P02_MOTER_toohot)===2  || Number(this.lists.E1_P02_E_L)===2||Number(this.lists.E1_P01_E_H)===2|| Number(this.lists.E1_P02_LEAKAGE)===2);
                    break;
                case 6:
                    newResult =    Number(this.lists.E1_H01_WORKING)===2  && (Number(this.lists.E1_H01_toohot)===2||Number(this.lists.E1_H01_TT06_break)===2||Number(this.lists.E1_H01_TT06_fault)===2);
                    break;
                case 7:
                    newResult =    Number(this.lists.E1_H03_WORKING)===2  && (Number(this.lists.E1_H03_toohot)===2||Number(this.lists.E1_H03_TT06_break)===2||Number(this.lists.E1_H03_TT06_fault)===2);
                    break;
                case 8:
                    newResult =    Number(this.lists.E1_H02_WORKING)===2  && (Number(this.lists.E1_H02_toohot)===2||Number(this.lists.E1_H02_TT06_break)===2||Number(this.lists.E1_H02_TT06_fault)===2);
                    break;
                case 9:
                    newResult =    Number(this.lists.VB01_Feedback)<=30;
                    break;
                case 10:
                    newResult =    Number(this.lists.VB02_Feedback)<=30;
                    break;
                case 11:
                    newResult =    (Number(this.lists.E3_J01_WORKING)===2 &&(Number(this.lists.E2_J01_ALARM)===2)) ||
                                (Number(this.lists.E3_J02_WORKING)===2&&( Number(this.lists.E2_J02_ALARM)===2))||
                                (Number(this.lists.E3_J03_WORKING)===2&&( Number(this.lists.E2_J03_ALARM)===2));
                    break;
                case 12:
                    newResult =    Number(this.lists.E2_Z01_ALARM)===2;
                    break;
                case 13:
                    newResult =    Number(this.lists.TK1_AC1_POWER_fault)===2||Number(this.lists.TK1_BUS_fault)===2||
                                Number(this.lists.TK1_AC2_POWER_fault)===2||Number(this.lists.E2_M01_FAULT)===2||
                                Number(this.lists.E2_M01_TOO_HOT)===2|| Number(this.lists.E2_M02_FAULT)===2||
                                Number(this.lists.E2_M02_TOO_HOT)===2;
                    break;
                case 14:
                    newResult =    Number(this.lists.TK2_AC1_POWER_fault)===2||Number(this.lists.TK2_BUS_fault)===2||
                                Number(this.lists.TK2_AC2_POWER_fault)===2||Number(this.lists.E2_M03_FAULT)===2||
                                Number(this.lists.E2_M03_TOO_HOT)===2|| Number(this.lists.E2_M04_FAULT)===2||
                                Number(this.lists.E2_M04_TOO_HOT)===2;
                    break;
                case 15:
                    newResult =    Number(this.lists.TK3_AC1_POWER_fault)===2||Number(this.lists.TK3_BUS_fault)===2||
                                Number(this.lists.TK3_AC2_POWER_fault)===2||Number(this.lists.E2_M05_FAULT)===2||
                                Number(this.lists.E2_M05_TOO_HOT)===2|| Number(this.lists.E2_M06_FAULT)===2||
                                Number(this.lists.E2_M06_TOO_HOT)===2;
                    break;
                case 16:
                    newResult =    Number(this.lists.E5_TT01_BREAK)===2||Number(this.lists.E5_TT01_FAULT)===2;
                    break;
                case 17:
                    newResult =    Number(this.lists.BACK10115)===2&&Number(this.lists.E5_J01_FAULT)===2;
                    break;
                case 18:
                    newResult =    Number(this.lists.BACK10114)===2&&Number(this.lists.E5_J02_FAULT)===2;
                    break;
                case 19:
                    newResult =    Number(this.lists.E5_PV01_DIFF_HH)===2||Number(this.lists.E5_PV01_DIFF_H)===2;
                    break;
                case 20:
                    newResult =    Number(this.lists.E5_PV02_DIFF_HH)===2||Number(this.lists.E5_PV02_DIFF_H)===2;
                    break;
                case 21:
                    newResult =    Number(this.lists.E5_PV03_DIFF_HH)===2||Number(this.lists.E5_PV03_DIFF_H)===2;
                    break;
                
            }
            // 这个地方做了一个处理结果的打印，不要在生产上放开，占内存
            // console.log('-----------------------------result=',type,result)
            result = !newResult
            return result
        }
    },
}
</script>

<style lang="less" scoped>
.small{
    .runState{
        .left{
            display: none;
        }
        .right{
            width: 100%;
            .infos{
                display: none;
            }
        }
    }
}
.runState{
    display: flex;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .left{
        width: 50%;
        height: 100%;
        border-right: 10px solid #0d1830;
        text-align: center;
        padding-left: 10px;
        display: block;
        .text{
            color: #8DCFF8;
            font-size: 14px;
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 10px;
            img{
                width: 43px;
                margin-left: 10px;
            }
            &::before{
                position: absolute;
                content: '';
                width: 3px;
                height: 60%;
                top: 20%;
                left: 0;
                background: #8DCFF8;
            }
        }
    }
    .right{
        width: 50%;
        height: 100%;
        padding-right: 10px;
        .title{
            display: flex;
            justify-content: space-between;
            padding: 0 10px;
            .download{
                width: 50px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                background: #164C7E;
                size: 14px;
                border-radius: 3px;
                &:hover,&:active,&.active{
                    color: #8DCFF8;
                }
            }
            .tab{
                width: 100%;
                height: 40px;
                display: flex;
                position: relative;
                p{
                    width: 80px;
                    height: 30px;
                    line-height: 30px;
                    margin-right: 10px;
                    background: #164C7E;
                    size: 16px;
                    color: #5273E0;
                    text-align: center;
                    cursor: pointer;
                    border-radius: 3px;
                        &:hover,&:active,&.active{
                            color: #8DCFF8;
                        }
                    }
                .full{
                    padding-right: 10px;
                    img{
                    width: 30px;
                    height: 30px;
                    }

                }
            }
            
            }
        .tabs{
            color: #8DCFF8;
            font-size: 14px;
            display: flex;
            align-items: center;
            position: relative;
            padding-left: 10px;
            margin-bottom: 10px;
            img{
                width: 43px;
                margin-left: 10px;
            }
            &::before{
                position: absolute;
                content: '';
                width: 3px;
                height: 60%;
                top: 20%;
                left: 0;
                background: #8DCFF8;
            }
        }
        .analysis>div,.infos{
            margin-bottom: 30px;
            border-top: 1px solid #164C7E;
            border-bottom: 1px solid #164C7E;
            position: relative;
            .top_border{
                position: relative;
                width: 100%;
                height: 0;
                &::before{
                    position: absolute;
                    content: '';
                    top: -1px;
                    left: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
                &::after{
                    position: absolute;
                    content: '';
                    top: -1px;
                    right: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
            }
            .bottom_border{
                position: relative;
                width: 100%;
                height: 0;
                &::before{
                    position: absolute;
                    content: '';
                    bottom: -1px;
                    left: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
                &::after{
                    position: absolute;
                    content: '';
                    bottom: -1px;
                    right: 0;
                    z-index: 1;
                    width: 10px;
                    height: 2px;
                    background: #8DCFF8;
                }
            }
            .list{
                width: 100%;
                height: 100%;
                position: relative;
                .model{
                    position: absolute;
                    top: 20px;
                    left: 0;
                    right: 0;
                    bottom: 20px;
                    z-index: 1;
                    p{
                        position: absolute;
                        // background: red;
                        // opacity: 0.2;
                        cursor: pointer;
                    }
                    .item1-1{
                        top: 64%;
                        left: 14%;
                        right: 72%;
                        bottom: 16%;
                    }
                    .item1-2{
                        top: 84%;
                        left: 14%;
                        right: 72%;
                        bottom: 0%;
                    }
                    .item1-3{
                        top: 75%;
                        left: 29%;
                        right: 63%;
                        bottom: 0%;
                    }
                    .item1-4{
                        top: 66%;
                        left: 40%;
                        right: 43%;
                        bottom: 0%;
                    }
                    .item1-5{
                        top: 0%;
                        left: 57%;
                        right: 36%;
                        bottom: 87%;
                    }
                    .item1-6{
                        top: 33%;
                        left: 1%;
                        right: 80%;
                        bottom: 36%;
                    }
                    .item1-8{
                        top: 17%;
                        left: 57%;
                        right: 34%;
                        bottom: 64%;
                    }
                    .item1-9{
                        top: 11%;
                        left: 42%;
                        right: 53%;
                        bottom: 69%;
                    }
                    .item1-10{
                        top: 7%;
                        left: 48%;
                        right: 44%;
                        bottom: 63%;
                    }
                    .item1-11{
                        top: 32%;
                        left: 26%;
                        right: 65%;
                        bottom: 52%;
                    }
                    .item1-12{
                        top: 42%;
                        left: 55%;
                        right: 30%;
                        bottom: 34%;
                    }
                    .item1-13{
                        top: 68%;
                        left: 70%;
                        right: 20%;
                        bottom: 20%;
                    }
                    .item1-14{
                        top: 52%;
                        left: 70%;
                        right: 20%;
                        bottom: 32%;
                    }
                    .item1-15{
                        top: 7%;
                        left: 36%;
                        right: 59%;
                        bottom: 77%;
                    }
                    .item1-16{
                        top: 0%;
                        left: 0%;
                        right: 92%;
                        bottom: 87%;
                    }
                    .item1-17{
                        top: 6%;
                        left: 72%;
                        right: 6%;
                        bottom: 71%;
                    }
                    .item1-18{
                        top: 6%;
                        left: 41%;
                        right: 34%;
                        bottom: 71%;
                    }
                    .item1-19{
                        top: 6%;
                        left: 12%;
                        right: 64%;
                        bottom: 71%;
                    }
                    .item1-20{
                        top: 57%;
                        left: 67%;
                        right: 12%;
                        bottom: 27%;
                    }
                    .item1-21{
                        top: 31%;
                        left: 69%;
                        right: 16%;
                        bottom: 54%;
                    }
                    .item1-22{
                        top: 31%;
                        left: 38%;
                        right: 46%;
                        bottom: 54%;
                    }
                    .item1-23{
                        top: 31%;
                        left: 9%;
                        right: 76%;
                        bottom: 54%;
                    }
                    .item1-24{
                        top: 72%;
                        left: 49%;
                        right: 35%;
                        bottom: 0%;
                    }
                    .item1-25{
                        top: 72%;
                        left: 28%;
                        right: 54%;
                        bottom: 0%;
                    }
                    .item1-26{
                        top: 53%;
                        left: 89%;
                        right: 0%;
                        bottom: 26%;
                    }
                    .item1-26-1{
                        top: 70%;
                        left: 72%;
                        right: 20%;
                        bottom: 18%;
                    }
                    .item1-27{
                        top: 47%;
                        left: 0%;
                        right: 80%;
                        bottom: 26%;
                    }
                    .item1-28{
                        top: 56%;
                        left: 39%;
                        right: 52%;
                        bottom: 30%;
                    }
                    .item1-29{
                        top: 76%;
                        left: 0%;
                        right: 90%;
                        bottom: 5%;
                    }
                    .item1-30{
                        top: 40%;
                        left: 44%;
                        right: 49%;
                        bottom: 50%;
                    }
                    .item1-31{
                        top: 0%;
                        left: 65%;
                        right: 26%;
                        bottom: 85%;
                    }
                    .item1-32{
                        top: 11%;
                        left: 83%;
                        right: 6%;
                        bottom: 71%;
                    }
                    .item1-33{
                        top: 52%;
                        left: 5%;
                        right: 83%;
                        bottom: 29%;
                    }
                    .item1-34{
                        top: 40%;
                        left: 17%;
                        right: 75%;
                        bottom: 40%;
                    }
                    .item1-35{
                        top: 40%;
                        left: 60%;
                        right: 31%;
                        bottom: 38%;
                    }
                    .item1-36{
                        top: 40%;
                        left: 76%;
                        right: 15%;
                        bottom: 38%;
                    }
                    .item1-37{
                        top: 31%;
                        left: 86%;
                        right: 2%;
                        bottom: 49%;
                    }
                    .item1-38{
                        top: 0%;
                        left: 57%;
                        right: 35%;
                        bottom: 86%;
                    }
                }
                img{
                    width: 100%;
                    margin: 20px 0;
                }
        }
        }
        .infos{
            .item{
                p{
                    width: 16.6%;
                    text-align: center;
                }
            }
        }
        .lists{
            margin-top: 20px;
            .tabs{
                color: #8DCFF8;
                font-size: 14px;
                display: flex;
                align-items: center;
                position: relative;
                padding-left: 10px;
                margin-bottom: 10px;
                position: relative;
                img{
                    width: 43px;
                    margin-left: 10px;
                }
                &::before{
                    position: absolute;
                    content: '';
                    width: 3px;
                    height: 60%;
                    top: 20%;
                    left: 0;
                    background: #8DCFF8;
                }
            }
            .item{
                height: 35px;
                display: flex;
                border-radius: 3px;
                align-items: center;
                justify-content: space-between;
                padding: 0 10px;
                color: #FFFFFF;
                background: rgba(22,76,126,0.1);
                margin-bottom: 5px;
                font-size: 14px;
                &:nth-child(even){
                    p{
                        margin-left: 80px;
                    }
                    span{
                        margin-right: 30px;
                    }
                }
                &:nth-child(odd){
                    p{
                        margin-left: 30px;
                    }
                    span{
                        margin-right: 80px;
                    }
                }
            }
            .el-icon-success{
                color: green;
            }
            .el-icon-error{
                color: red;
            }
        }
    }
    .parameter{
        .list{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .item{
                width: 50%;
                padding: 0;
            }
        }
    }
}
</style>
